<template>
	<el-drawer v-model="visible" title="生成代码" size="80%" :with-header="false">
		<zh-form ref="formRef" v-loading="data.loading" :model="data.formData" label-width="120px" :span="12" :rules="data.rules">
			<zh-col :span="24">
				<el-divider> 生成信息 </el-divider>
			</zh-col>
			<zh-form-select
				prop="createType"
				label="生成类型"
				
				:options="data.dictData.createTypeGen"
				v-model="data.formData.createType"
			></zh-form-select>
			<zh-form-checkbox
				prop="createFuncList"
				label="生成功能"
				
				:options="data.dictData.createFuncGen"
				v-model="data.formData.createFuncList"
			></zh-form-checkbox>
			<zh-form-input
				prop="tableName"
				label="表名"
				:disabled="true"
				v-model="data.formData.tableName"
			></zh-form-input>
			<zh-form-input
				prop="className"
				label="类名"
				
				v-model="data.formData.className"
			></zh-form-input>
			<zh-form-input
				prop="tableComment"
				label="说明"
				
				v-model="data.formData.tableComment"
			></zh-form-input>
			<zh-form-input
				prop="prefixTable"
				label="去除表名前缀"
				
				v-model="data.formData.prefixTable"
			></zh-form-input>
			<zh-form-input
				prop="packageName"
				label="项目包名"
				
				v-model="data.formData.packageName"
			></zh-form-input>
			<zh-form-input
				prop="packageClassName"
				label="包内分类名"
				v-model="data.formData.packageClassName"
			></zh-form-input>
			<zh-form-select
				prop="baseclassId"
				label="继承基类"
				v-model="data.formData.baseclassId"
				:lazy="true"
				func-code="genBaseClass0001"
				:fieldNames="{ label: 'code', value: 'id' }"
				@change="changeBaseClass"
			></zh-form-select>
			<zh-form-radio
				prop="generatorType"
				label="生成方式"
				
				:options="data.dictData.generatorTypeGen"
				v-model="data.formData.generatorType"
			></zh-form-radio>
			<zh-form-radio
				prop="permissionLevel"
				label="权限级别"
				:options="data.dictData.permissionLevelGen"
				v-model="data.formData.permissionLevel"
			></zh-form-radio>
			<zh-form-radio
				prop="formLayout"
				label="表单布局"				
				:options="data.dictData.formLayoutGen"
				v-model="data.formData.formLayout"
			></zh-form-radio>
			<zh-form-radio
				prop="popType"
				label="弹窗类型"
				
				:options="data.dictData.popTypeGen"
				v-model="data.formData.popType"
			></zh-form-radio>
			<zh-form-input
				prop="author"
				label="作者"
				
				v-model="data.formData.author"
			></zh-form-input>
			<zh-form-input
				prop="version"
				label="项目版本号"
				
				v-model="data.formData.version"
			></zh-form-input>
			<zh-form-input
				prop="email"
				label="邮箱"
				
				v-model="data.formData.email"
			></zh-form-input>
			<zh-form-input
				prop="backendPath"
				label="后端生成路径"
				
				v-model="data.formData.backendPath"
			></zh-form-input>
			<zh-form-input
				prop="moduleName"
				label="模块名"
				v-model="data.formData.moduleName"
			></zh-form-input>
			<zh-form-input
				prop="moduleNameVo"
				label="VO模块名"				
				v-model="data.formData.moduleNameVo"
			></zh-form-input>
			
			<zh-form-input
				prop="frontendPath"
				label="前端生成路径"
				
				v-model="data.formData.frontendPath"
			></zh-form-input>
			<zh-col :span="24">
				<el-divider> 功能配置 </el-divider>
			</zh-col>
			<zh-form-select
				prop="templateMode"
				label="模版名称"
				:options="data.dictData.templateModeGen"
				v-model="data.formData.templateMode"
			></zh-form-select>
			<zh-form-input
				prop="reqBaseUrl"
				label="基础URL"
				v-model="data.formData.reqBaseUrl"
			></zh-form-input>
			<zh-form-input
				prop="functionName"
				label="功能名"
				v-model="data.formData.functionName"
			></zh-form-input>
			<zh-form-input
				prop="permissionType"
				label="权限标识"
				v-model="data.formData.permissionType"
			></zh-form-input>
			<zh-form-radio
				prop="encryptionFlag"
				label="接口加密"
				:options="data.encryptionFlagDict"
				v-model="data.formData.encryptionFlag"
			></zh-form-radio>
			<zh-form-radio
				prop="checkboxFlag"
				label="可选择列表"			
				:options="data.encryptionFlagDict"
				v-model="data.formData.checkboxFlag"
			></zh-form-radio>
			<zh-col :span="24">
				<el-divider> 默认树配置参数 </el-divider>
			</zh-col>
			<zh-form-select
				prop="dataSource"
				label="数据来源"
				:options="data.dataSourceDict"
				v-model="data.formData.treeConfig.dataSource"
			></zh-form-select>
			<zh-form-input
				prop="leftTitle"
				label="左侧标题"
				
				v-model="data.formData.treeConfig.leftTitle"
			></zh-form-input>
			<zh-form-input
				prop="dataSourceValue"
				:label="data.formData.treeConfig.dataSource==='2'?'接口地址':'表名'"
				v-model="data.formData.treeConfig.dataSourceValue"
			></zh-form-input>
			<zh-form-input
				prop="associationField"
				label="关联字段"
				v-model="data.formData.associationField"
			></zh-form-input>
			<zh-form-input
				prop="treeId"
				label="树id字段"
				v-model="data.formData.treeConfig.treeId"
			></zh-form-input>
			<zh-form-input
				prop="parentId"
				label="树父id字段"
				v-model="data.formData.treeConfig.parentId"
			></zh-form-input>
			<zh-form-input
				prop="title"
				label="显示实体字段"
				v-model="data.formData.treeConfig.title"
			></zh-form-input>
			<zh-col :span="24">
				<el-divider> 默认自定义配置参数 </el-divider>
			</zh-col>
			<zh-col :span="24">
				<zh-table type="default" ref="optionsTable" :toolbarConfig="data.toolbarConfig" @toolbarButtonClick="optionsToolbarButtonClick" height="300px" size="mini" :columns="data.optionsColumns" highlight-current-row :data="data.formData.optionsConfig">
				<template #operate="{ row }">
					<zh-button  plain size="small" color="#F56C6C"  @click="deleteOptionsData(row)">删除</zh-button>
				</template>
				<template #fieldCode_edit="{ row }">
					<zh-input  v-model="row.fieldCode" />
				</template>
				<template #fieldName_edit="{ row }">
					<zh-input  v-model="row.fieldName" />
				</template>
				<template #fieldValue_edit="{ row }">
					<zh-input v-model="row.fieldValue" />
				</template>
				</zh-table>
			</zh-col>
		</zh-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" :disabled="data.saveLoading" :loading="data.saveLoading" @click="submitHandle()">保存</el-button>
			<el-button type="danger" :disabled="data.createLoading" :loading="data.createLoading" @click="generatorHandle()">生成代码</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
const visible = ref(false)
const formRef = ref()
const data = reactive({
	encryptionFlagDict:[{dictKey:'0',dictValue:'否'},{dictKey:'1',dictValue:'是'}],
	formData:{
		id: '',
		baseclassId: '',
		generatorType: 0,
		formLayout: 1,
		backendPath: '',
		frontendPath: '',
		packageName: '',
		email: '',
		author: '',
		version: '',
		moduleName: '',
		functionName: '',
		className: '',
		tableComment: '',
		tableName: '',
		treeConfig:{},
		optionsConfig:[],
		subTableConfig:[]

	},
	rules: {
		author: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		backendMode: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		frontendMode: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		generatorType:[{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		createType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		createFunc: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		formLayout: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		permissionLevel: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		popType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		tableName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		tableComment: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		className: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		packageName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		moduleName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		functionName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		backendPath: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		frontendPath: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
	},
	loading:false,
	saveLoading:false,
	createLoading:false,
	toolbarConfig: {
		buttons: [
		{ name: '新增', code: 'myAdd', status: 'primary' },
		],
		custom: true,
	},
	dataSourceDict:[{dictKey:'1',dictValue:'数据库表'},{dictKey:'2',dictValue:'数据接口'}],
	dictData: {} as any,
	optionsColumns: [
    {
      type: 'seq',
      width: 60,
      fixed: 'left',
      align: 'center',
      title: '序号',
    },
    {
      field: 'fieldCode',
      title: '字段',
      visible: true,
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'fieldCode_edit',
      },
    },
    {
      field: 'fieldName',
      title: '字段名称',
      visible: true,
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'fieldName_edit',
      },
    },
    {
      field: 'fieldValue',
      title: '字段值',
      visible: true,
      align: 'center',
      minWidth: 300,
      slots: {
        // 使用插槽模板渲染
        default: 'fieldValue_edit',
      },
    },
    {
      field: 'operate',
      title: '操作',
      fixed: 'right',
      align: 'center',
      width: 210,
      slots: {
        // 使用插槽模板渲染
        default: 'operate',
      },
    },
  ]
})

const init = (id: number) => {
	visible.value = true

	// 重置表单数据
	if (formRef.value) {
		formRef.value.resetFields()
	}
	getDict();
	getDetail(id)
}
// 查询数据字典信息
const getDict = () => {
  const params = {} as any;
  params.dictFields = 'createTypeGen,createFuncGen,permissionLevelGen,formLayoutGen,popTypeGen,generatorTypeGen,templateModeGen';
  $api.common.getBatchDict.post(params).then((res) => {
    data.dictData = res.result;
  });
};
const changeBaseClass = (val,options) => {
  if (val) {
    data.formData.baseClassCode = options.code;
  }else{
    data.formData.baseClassCode = '';
  }
};
const optionsToolbarButtonClick =(params)=> {
   if(params.code==='myAdd'){
    let list=[];
    if(data.formData.optionsConfig){
      list=data.formData.optionsConfig;
    }
    list.push({
       index:list.length,
    })
    data.formData.optionsConfig=list;
   }
}
const deleteOptionsData = (row) => {
  let list=[];
  if(data.formData.optionsConfig){
    list=data.formData.optionsConfig;
  }

  let newList=[];
  let i=0;
  list.forEach(element => {
    if(element.index!==row.index){
      element.index=i;
      newList.push(element);
      i++;
     
    }
  });
  data.formData.optionsConfig=newList;
}
//获取详情
const getDetail = (id) => {
  data.loading = true;
  $api.common.send
  .post('genTable0002', { id: id })
  .then((res: any) => {
    let result=res.result || {};
    if(!result.treeConfig){
      result.treeConfig={treeId:'id',parentId:'parentId',title:'title',dataSource:'1',dataSourceValue:'',leftTitle:'',associationField:''};
    }
    if(!result.optionsConfig){
      result.optionsConfig=[]
    }else{
      let i=0;
      result.optionsConfig.forEach(element => {
        element.index=i;
        i++;
      });
    }
    if(!result.createFuncList){
      result.createFuncList=[]
    }
	if(!result.subTableConfig){
      result.subTableConfig=[]
    }
	
    
    data.formData = result
    data.loading = false;
  })
  .catch(() => {
    data.loading = false;
  });
};
// 保存
const submitHandle = () => {
	data.saveLoading=true;
	formRef.value.validate((valid: boolean) => {
		if (!valid) {
			data.saveLoading=false;
			return false
		}

		$api.common.send
		.post('genTable0005', data.formData)
		.then((res) => {
			data.saveLoading=false;
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
				}
			})
		}).catch(()=>{
			data.saveLoading=false;
		})
	})
}

// 生成代码
const generatorHandle = () => {
	data.createLoading=true;
	formRef.value.validate((valid: boolean) => {
		if (!valid) {
			data.createLoading=false;
			return false
		}

		// 先保存
		$api.common.send
		.post('genTable0005', data.formData).then(() => {
			// 生成代码，zip压缩包
			if (data.formData.generatorType === '0') {
				$api.common.download.post("genTable0011",{id:data.formData.id},data.formData.tableComment+'.zip');
				visible.value = false
				data.createLoading=false;
				return
			}
			// 生成代码，自定义路径
			$api.common.send
			.post('genTable0012', {id:data.formData.id},30000)
			.then(() => {
				data.createLoading=false;
				ElMessage.success({
					message: '操作成功',
					duration: 500,
					onClose: () => {
						visible.value = false
					}
				})
			}).catch(()=>{
				data.createLoading=false;
			})
		}).catch(()=>{
			data.createLoading=false;
		})
		

		
	})
}

defineExpose({
	init
})
</script>

<style lang="scss" scoped>
.generator-code .el-dialog__body {
	padding: 15px 30px 0 20px;
}
</style>
